import * as React from 'react';
import { observer } from 'mobx-react'
import styles from './index.scss';

import LineShadow from '../../pages/home/LineShadow'
import LineDouble from '../../pages/home/LineDouble'

import eye from '../../assets/imgs/test/eye.png'
import book from '../../assets/imgs/test/book.png'
import customer from '../../assets/imgs/test/customer.png'
import install from '../../assets/imgs/test/install.png'
import data from '../../assets/imgs/test/data.png'
import FirstStore from '../../store/firstStore'
import { observable } from "mobx";

interface IProps {
    isShadow: boolean
    countCM: number// 相关的数量
    countPM: number// 相关的数量
    countCV: number// 相关的数量
    countCS: number// 相关的数量
    countII: number// 相关的数量
    chartDataY?: number[]// 图表的数据Y
    chartDataX?: string[]// 图表的数据X
    dataX?: string[]
    dataY1?: number[]
    dataY2?: number[]
    dataY3?: number[]
    dataY4?: number[]
    dataY5?: number[]
}

interface IStates {
}

@observer
class Home extends React.Component<IProps, IStates> {

    constructor(props) {
        super(props);
    }

    public child: any

    @observable
    public selected: string[] = ['CM', 'CUSTOMER VISIT', 'PM', 'INSTALLATION+UPDATE(SW/HW)', 'CLINICAL PHYSICS SUPPORT']

    public handleRef = (node) => {
        this.child = node
    }

    // 控制线的显示隐藏
    public handleLine = (type: string) => {
        if (this.selected.indexOf(type) !== -1) {
            const index = this.selected.indexOf(type)
            this.selected.splice(index, 1)
            switch (type) {
                case 'CM':
                    FirstStore.countOrderFiveCMY = []
                    break;
                case 'CUSTOMER VISIT':
                    FirstStore.countOrderFiveCVY = []
                    break;
                case 'PM':
                    FirstStore.countOrderFivePMY = []
                    break;
                case 'INSTALLATION+UPDATE(SW/HW)':
                    FirstStore.countOrderFiveIIY = []
                    break;
                case 'CLINICAL PHYSICS SUPPORT':
                    FirstStore.countOrderFiveCSY = []
                    break;
            }
            this.child.newData()
        } else {
            this.selected.push(type)
            switch (type) {
                case 'CM':
                    FirstStore.countOrderFiveCMY = FirstStore.countOrderFiveAllY.y_list['Corrective Maintenance (CM)']
                    break;
                case 'CUSTOMER VISIT':
                    FirstStore.countOrderFiveCVY = FirstStore.countOrderFiveAllY.y_list['Customer Visit']
                    break;
                case 'PM':
                    FirstStore.countOrderFivePMY = FirstStore.countOrderFiveAllY.y_list['Preventative Maintenance (PM)']
                    break;
                case 'INSTALLATION+UPDATE(SW/HW)':
                    FirstStore.countOrderFiveIIY = FirstStore.countOrderFiveAllY.y_list['Install/Upgrade issues']
                    break;
                case 'CLINICAL PHYSICS SUPPORT':
                    FirstStore.countOrderFiveCSY = FirstStore.countOrderFiveAllY.y_list['Clinical/Physics support']
                    break;
            }
            this.child.newData()
        }
    }


    public render() {
        const {
            countCM, countPM, countCV, countCS, chartDataY, chartDataX, isShadow, countII,
            dataX, dataY1, dataY2, dataY3, dataY4, dataY5
        } = this.props
        return (
            <div className={styles.oneTop}>
                <div className={styles.title}>历史工单统计</div>
                <div className={styles.LOC}>
                    <div className={styles.legend}>
                        <div className={styles.top}>
                            <div className={styles.left} onClick={this.handleLine.bind(this, 'CM')}>
                                <img src={book} className={styles.book} />
                                <div className={styles.twoLeft}>
                                    <p className={styles.twoLeftP1}>{countCM}</p>
                                    <p className={styles.twoLeftP2}>纠正性维修</p>
                                </div>
                            </div>
                            <div className={styles.right} onClick={this.handleLine.bind(this, 'CUSTOMER VISIT')}>
                                <img src={eye} className={styles.eye} />
                                <div className={styles.twoLeft}>
                                    <p className={styles.twoLeftP1}>{countCV}</p>
                                    <p className={styles.twoLeftP2}>客户拜访</p>
                                </div>
                            </div>
                            <div className={styles.left}>
                                <img src={customer} className={styles.customer} />
                                <div className={styles.twoLeft}>
                                    <p className={styles.twoLeftP1}>{countPM}</p>
                                    <p className={styles.twoLeftP2}>预防性保养</p>
                                </div>
                            </div>
                        </div>
                        <div className={styles.top} onClick={this.handleLine.bind(this, 'PM')}>

                            <div className={styles.right}
                                onClick={this.handleLine.bind(this, 'INSTALLATION+UPDATE(SW/HW)')}>
                                <img src={install} className={styles.install} />
                                <div className={styles.twoLeft}>
                                    <p className={styles.twoLeftP1}>{countII}</p>
                                    <p className={styles.twoLeftP2}>安装升级</p>
                                </div>
                            </div>
                            <div className={styles.five} onClick={this.handleLine.bind(this, 'CLINICAL PHYSICS SUPPORT')}>
                                <img src={data} className={styles.data} />
                                <div className={styles.twoFive}>
                                    <p className={styles.twoFiveP1}>{countCS}</p>
                                    <p className={styles.twoFiveP2}>临床/物理支持</p>
                                </div>
                            </div>
                        </div>

                    </div>
                    {
                        isShadow ?
                            <div className={styles.eChar}>
                                <LineShadow dataY={chartDataY} dataX={chartDataX} />
                            </div>
                            : <div className={styles.eCharD}>
                                <LineDouble ref={this.handleRef} dataX={dataX} dataY1={dataY1} dataY2={dataY2}
                                    dataY3={dataY3} dataY4={dataY4}
                                    dataY5={dataY5} />
                            </div>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
